{% extends "base.html" %}
{% block title %}用户注册{% endblock %}
{% block content%}

<form id='myform' target='_self' method='POST' action='' onsubmit='return validateForm(this);'>
<table id='formtable' class='formtable'>
<tr>
<td class='title'>
用户名：<span>*</span></td>
<td class='input'>
<input class='input' style='width:150px;' id='username' name='username' type='Text' value='' 
 maxlength='32'
/>
</td><td class='info'><div 
 style='height:16px'
 id='usernameinfo' class='HintMsg'> 用户名以字母开头，4-16位字母、数字组成。 </div>
</td>
</tr>
<tr>
<td class='title'>
真实姓名：<span>*</span></td>
<td class='input'>
<input class='input' style='width:150px;' id='cnname' name='cnname' type='Text' value='' 
 maxlength='32'
/>
</td><td class='info'><div 
 style='height:16px'
 id='cnnameinfo' class='HintMsg'> 2-6个中文 </div>
</td>
</tr>
<tr>
<td class='title'>
密码：<span>*</span></td>
<td class='input'>
<input class='input' style='width:150px;' id='password' name='password' type='Password' value='' 
 maxlength='32'
/>
</td><td class='info'><div 
 style='height:16px'
 id='passwordinfo' class='HintMsg'> 密码由6-18位任意字符组成 </div>
</td>
</tr>
<tr>
<td class='title'>
确认密码：<span>*</span></td>
<td class='input'>
<input class='input' style='width:150px;' id='confirm' name='confirm' type='Password' value='' 
 maxlength='32'
 equalTo='password'
/>
</td><td class='info'><div 
 style='height:16px'
 id='confirminfo' class='HintMsg'> 请输入上面的密码 </div>
</td>
</tr>
<tr>
<td class='title'>
座号：<span>*</span></td>
<td class='input'>
<input class='input' style='width:150px;' id='sitenum' name='sitenum' type='Text' value='' 
 maxlength='32'
/>
</td><td class='info'><div 
 style='height:16px'
 id='sitenuminfo' class='HintMsg'> 请输入你的座号（新座号） </div>
</td>
</tr>

<tr>
<td colspan='2' style="text-align:right"><input type='submit' value="提交"></td>
<td></td>
</tr>
</table>
</form>
<br />

<script language="javascript" type="text/javascript">
/*
以下 Javascript 代码由代码生成器创建，来源于 http://www.mssky.cn/code
为了保持页面的干净，建议您在使用的时候放到单独的 js 文件中
*/
var oBrowser = new DetectBrowser();
var OnFormValidating = null;
var OnFormValidated = null;
var OnValidating = null;
var OnValidated = null;
function ValidateArgs()
{
    this.element = null;
    this.elementInfo = null;
    this.args = null;
};
//style name definition
var OK_MSG = "OkMsg";
var ERROR_MSG = "ErrorMsg";
var WARNING_MSG = "WarningMsg";
var HINT_MSG = "HintMsg";
var INPUT_ELM_STYLE = "input";
var MSG_ELM_SUFFIX = "info";
var PASSED_TEXT = "通过";

var MsgCode = {
    OkMsg : 0,
    HintMsg : 1,
    WarningMsg : 2,
    ErrorMsg : 3,
    RegexText : 4,
    NullMsg : 5
};

//message or expression definition
var msg_username_hint = '用户名以字母开头，4-16位字母、数字组成。';
var msg_username_null = '<b>用户名</b> 不能为空';
var msg_username_error = '用户名格式不正确';
var msg_username_reg = /^[a-zA-Z][\w]{3,15}$/;
var msg_cnname_hint = '2-6个中文';
var msg_cnname_null = '<b>真实姓名</b> 为必填项。'
var msg_cnname_error = '中文名格式不正确';
var msg_cnname_reg = /^[\u4e00-\u9fa5]{2,6}$/;
var msg_password_hint = '密码由6-18位任意字符组成';
var msg_password_null = '<b>密码</b> 不能为空';
var msg_password_error = '密码必须由6-18位任意字符组成';
var msg_password_reg = /^.{6,18}$/;
var msg_confirm_hint = '请输入上面的密码';
var msg_confirm_null = '<b>确认密码</b> 不能为空';
var msg_confirm_error = '请再输入一次上面的密码';
var msg_confirm_reg = null;
var msg_sitenum_hint = '请输入你的座号（新座号）';
var msg_sitenum_null = '<b>座号</b> 不能为空';
var msg_sitenum_error = '座号不正确';
var msg_sitenum_reg = /[\d]{1,2}/;


function getMsg(element,msgCode)
{
    var elmName = element.name;
    var pp = elmName.indexOf(".");
    
    if(pp>0)
    {
        elmName = elmName.substring(0,pp);
    }
    
    if(msgCode == null)
        msgCode = MsgCode.ErrorMsg;
        
    switch(msgCode)
    {
        case MsgCode.ErrorMsg:
            switch(elmName){
              case 'username':
                  return msg_username_error;
              case 'cnname':
                  return msg_cnname_error;
              case 'password':
                  return msg_password_error;
              case 'confirm':
                  return msg_confirm_error;
              case 'sitenum':
                  return msg_sitenum_error;

                default:
                    return null;
            }
            break;
       case MsgCode.NullMsg:
            switch(elmName){
              case 'username':
                  return msg_username_null;
              case 'cnname':
                  return msg_cnname_null;
              case 'password':
                  return msg_password_null;
              case 'confirm':
                  return msg_confirm_null;
              case 'sitenum':
                  return msg_sitenum_null;

                default:
                    return null;
            }
            break;
        case MsgCode.WarningMsg:
        case MsgCode.HintMsg:
            switch(elmName){
              case 'username':
                  return msg_username_hint;
              case 'cnname':
                  return msg_cnname_hint;
              case 'password':
                  return msg_password_hint;
              case 'confirm':
                  return msg_confirm_hint;
              case 'sitenum':
                  return msg_sitenum_hint;

                default:
                    return null;
            }
            break;
        case MsgCode.OkMsg:
            return PASSED_TEXT;
            break;
        case MsgCode.RegexText:
            switch(elmName){
              case 'username':
                  return msg_username_reg;
              case 'cnname':
                  return msg_cnname_reg;
              case 'password':
                  return msg_password_reg;
              case 'confirm':
                  return msg_confirm_reg;
              case 'sitenum':
                  return msg_sitenum_reg;

                default:
                    return null;
            }
            break;
        default:
            return null;       
    }
}
function getHintMsg(element)
{
    var msg = getMsg(element,MsgCode.HintMsg);
    
    return msg;
}


function getOkMsg(element)
{
    var msg = getMsg(element,MsgCode.OkMsg);
    
    return msg;
}

function getErrorMsg(element)
{
    var msg = getMsg(element,MsgCode.ErrorMsg);

    if(isNullString(msg))
        msg = getMsg(element,MsgCode.HintMsg);
        
    return msg;
}
function getNullMsg(element)
{
    var msg = getMsg(element,MsgCode.NullMsg);
 
    return msg;
}
function getWarningMsg(element)
{
    var msg = getMsg(element,MsgCode.WarningMsg);
     if(isNullString(msg))
        msg = getMsg(element,MsgCode.HintMsg);   
    return msg;
}
function getElementInfo(element)
{
    var pp = element.name.indexOf(".");
    //alert(pp);
    if(pp>0)
    {
        var elmName = element.name.substring(0,pp);
        //alert(elmName);
        return $(elmName + MSG_ELM_SUFFIX);
    }
    else
        return $(element.name + MSG_ELM_SUFFIX);
}
function validateForm(frm)
{
    if(OnFormValidating != null)
        OnFormValidating();
    var ret = true;
	for(var i=0 ; i<frm.elements.length ; i++)
	{
		if(frm.elements[i].className.indexOf(INPUT_ELM_STYLE)>=0)
		{ 
		    var elm =  frm.elements[i];
			var elmInfo = getElementInfo(elm);

			if(validateInput(elm))
			{
			    elmInfo.className = HINT_MSG;
			}
			else
			{			
			    var nullMsg = getNullMsg(elm);
			    if(!isNullString(nullMsg) && isNullString(frm.elements[i].value))
			    {
			        elmInfo.innerHTML = nullMsg;
			    }	
			    else
			    {
		    		var errMsg = getErrorMsg(elm);
	                    
	                elmInfo.innerHTML = errMsg;
			    }
	    
				elmInfo.className = ERROR_MSG;
				ret = false;
			}

		}
	}
    if(OnFormValidated != null)
        OnFormValidated();        

	return ret;
}

function isSelected(element)
{
    var elements = document.getElementsByName(element.name);
    for (i=0; i < elements.length; i++) {
        if(elements[i].checked == true) {
            return true;
        }
    }
    return false;
}

function validateInput(element)
{
    var isValid = false;   
	var elmInfo = getElementInfo(element);	
	var args = new ValidateArgs();
	
	args.element = element;
	args.elementInfo = elmInfo;
	args.args = false;//是否取消
	
	if(OnValidating != null)
	    OnValidating(args);    
	
	
	if(args.args == true)
	    return true;

	args.args = null;
	
	if(element.type == 'checkbox' || element.type == 'radio')
	{
	    var nullMsg = getNullMsg(element);
	    if(isNullString(nullMsg))
	    {
	        isValid = true;
	    }
	    else
	        isValid = isSelected(element);
	}
	else
	{
	    if(isNullString(element.value))
	    {	
	        elmInfo.className = HINT_MSG;
            
	        var nullMsg = getNullMsg(element);

		    if(isNullString(nullMsg))
		    {
			    isValid = true;
		    }
		    else
		    {
		        element.className = INPUT_ELM_STYLE;
			    isValid = false;
		    }
	    }
	    else
	    {
	        var regTxt = getMsg(element,MsgCode.RegexText);

	        if(isNullString(regTxt))
	        {
	            var equalTo = element.getAttribute("equalTo");
	            if(isNullString(equalTo))
	                isValid = true;
	            else
	            {
	                var equalToElm = $(equalTo);
	                isValid = (equalToElm.value == element.value)
	            }    
	        }
	        else
	        {
		        var reg = new RegExp(regTxt);
		        isValid = reg.test(element.value);
		    }
        }
	}

    
	if(isValid)
	{
		//element.className = INPUT_ELM_STYLE;
		elmInfo.className = OK_MSG;
		elmInfo.innerHTML = getOkMsg(element);
	}
	else
	{
	    //element.className = INPUT_ELM_STYLE;		
		
		if(isNullString(element.value))
		{
		    elmInfo.innerHTML = getHintMsg(element);
		    elmInfo.className = HINT_MSG;
        }
        else
        {
		    elmInfo.innerHTML = getErrorMsg(element);
		    elmInfo.className = ERROR_MSG;
	    }
	}

	args.args = isValid;
    if(OnValidated != null)
        OnValidated(args);

	return isValid;
}

function initForm(formname)
{
	var frm = $(formname);
	for(var i=0 ; i<frm.elements.length ; i++)
	{
		if(frm.elements[i].className.indexOf(INPUT_ELM_STYLE)>=0)
		{ 
			frm.elements[i].onfocus = function(evnt)
			{
			    var elm;
		    	if (oBrowser.isIE) {
	                elm = event.srcElement;
                }else {
	                elm = evnt.target;
                }
				var elmInfo = getElementInfo(elm);
				if(elmInfo.innerHTML == getOkMsg(elm))
				{

				}
				else
				{
				    elmInfo.className = WARNING_MSG;
				    elmInfo.innerHTML = getHintMsg(elm);
				}
			}
			switch(frm.elements[i].tagName.toLowerCase())
			{
			    case "select":
				    frm.elements[i].onclick = function(evnt)
			        {
                        var elm;
                        if (oBrowser.isIE) {
                            elm = event.srcElement;
                        }else {
                            elm = evnt.target;
                        }
				        validateInput(elm);
			        }		    
			        break;
			    case "input": 
			        switch(frm.elements[i].type.toLowerCase())
			        {
			            case "radio":
			            case "checkbox":
					        frm.elements[i].onclick = function(evnt)
			                {
                                var elm;
                                if (oBrowser.isIE) {
                                    elm = event.srcElement;
                                }else {
                                    elm = evnt.target;
                                }
				                validateInput(elm);
			                }		            
			                break;
			            default:
		            		frm.elements[i].onblur = function(evnt)
		                    {
                                var elm;
                                if (oBrowser.isIE) {
                                    elm = event.srcElement;
                                }else {
                                    elm = evnt.target;
                                }
			                    validateInput(elm);
		                    }
			                break;
			        }
			        break;
			    case "textarea":			    
			    default:
			        frm.elements[i].onblur = function(evnt)
			        {
                        var elm;
                        if (oBrowser.isIE) {
                            elm = event.srcElement;
                        }else {
                            elm = evnt.target;
                        }
				        validateInput(elm);
			        }
			}
			
			/*
			frm.elements[i].onchange = function()
			{
                var elm;
                if (oBrowser.isIE) {
                    elm = event.srcElement;
                }else {
                    elm = evnt.target;
                }
				validateInput(elm);
			}*/
		}
	}
}
initForm('myform')

/*
用户可以操作的代码
*/
//表单验证开始
OnFormValidating = function()
{

}
//表单验证结束
OnFormValidated = function()
{

}

//表单元素验证开始
OnValidating = function(arg)
{
    //alert(arg.element.name);
    //arg.args = true; 取消验证
//    arg.element;
//    arg.elementInfo;
//    arg.args;
}
//表单元素验证结束
OnValidated = function(arg)
{
//    arg.element;
//    arg.elementInfo;
//    arg.args;
}

</script>
{% endblock %}
